<!--
 * @Author: Meow
 * @Date: 2019-10-10 22:50:59
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-01 17:17:23
 * @Description: 组织机构档案
 -->
<template>
  <div id="InstitutionalFile" class="container">
    <!-- 左侧树 -->
    <div class="AsideBox">
      <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      <div class="Aside">
        <el-scrollbar :native="false" tag="section" class="el-scroll">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
            @node-contextmenu="rightClick"
          ></el-tree>
        </el-scrollbar>
      </div>
      <!-- 添加目录弹出层 -->
      <el-dialog width="30%" title="添加目录" :visible.sync="dialogVisible">
        <el-form ref="form" label-width="80px">
          <el-form-item label="上级目录">
            <el-select v-model="form.parentId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.catalogId"
                :label="item.catalogName"
                :value="item.catalogId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-input v-model="form.catalogName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="目录类型">
              <el-select v-model="form.catalogType" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.catalogId"
                  :label="item.dictName"
                  :value="item.dictName"
                ></el-option>
              </el-select>
          </el-form-item>-->
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Submit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 确认删除目录弹出层 -->
      <el-dialog width="30%" title="删除目录" :visible.sync="dialogVisible2">
        <span>是否删除{{selectNode.name}}目录？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="delNode">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 鼠标位置模态框 -->
      <div v-show="menuVisible">
        <ul id="menu" class="menu">
          <li class="menu__item" @click="addNodeDialog">添加</li>
          <!-- <li class="menu__item">重命名</li> -->
          <li class="menu__item" @click="dialogVisible2=true">删除</li>
        </ul>
      </div>
    </div>
    <!-- 右侧内容 -->
    <div class="Main">
      <div class="Main-top">
        <el-breadcrumb separator=">>">
          <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
          <el-breadcrumb-item>组织机构档案</el-breadcrumb-item>
          <el-breadcrumb-item>福州市人民政府办公厅</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="Main-content">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="数据需求清单" name="first">
            <!-- <el-table :data="tableData1" border style="width: 100%">
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>-->
            <Table1 :tableData1="tableData1"></Table1>
          </el-tab-pane>
          <el-tab-pane label="业务流程" name="second">
            <Process></Process>
          </el-tab-pane>
          <el-tab-pane label="汇交数据清单" name="third">
            <Table></Table>
          </el-tab-pane>
          <el-tab-pane label="汇交资源被使用情况" name="fourth">
            <Table></Table>
          </el-tab-pane>
          <el-tab-pane label="允许申请其他单位数据清单" name="fifth">
            <Table></Table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import InstitutionalFileApi from "@/httpUtils/InstitutionalFile/institutionalFile";
import Process from "./components/Process";
import Table1 from "./components/Table1";
export default {
  name: "InstitutionalFileView",
  components: {
    Table1, // 数据需求清单
    Process // 业务流程
    // Process, // 业务流程
    // Process, // 业务流程
  },
  data() {
    return {
      Loading: false, // 加载中
      // 左侧树相关---------------------------------------------------
      menuVisible: false, // 右键树是否显示菜单栏
      dialogVisible: false, // 添加目录弹出层
      dialogVisible2: false, // 删除目录弹出层
      filterText: "", // 搜索框过滤
      treeData: [], // 左侧树数据
      options: [], // 添加目录-父节点列表
      // typeList: [], // 添加目录-目录类型列表
      // 右键选中的节点id和name
      selectNode: {
        id: "",
        name: ""
      },
      // 添加目录-表单参数
      form: {
        parentId: "", // 父节点列表所选的值
        catalogName: "", // 目录名称
        catalogType: "org" // 目录类型
      },
      // 左侧树props
      defaultProps: {
        children: "child",
        label: "name"
      },
      // -------------------------------------------------------------------------
      activeName: "first", // 当前tabs
      // 表格1-数据需求清单
      tableData1: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.GetTreeData(); // 获取树数据
  },
  methods: {
    // 左侧树相关功能----------------------------------------------------------------------
    // 获取树
    GetTreeData() {
      InstitutionalFileApi.treeData().then(res => {
        this.treeData = res.data.data;
      });
    },
    // 获取父节点列表和目录类型
    GetFatherList() {
      // 获取父节点列表
      InstitutionalFileApi.findCatalogList().then(res => {
        console.log(" 获取父节点列表--------------", res.data.data);
        res.data.data.unshift({
          catalogId: "0",
          catalogName: "无"
        });
        this.options = res.data.data;
      });
    },
    // 显示添加目录弹出层
    addNodeDialog() {
      this.dialogVisible = true;
      this.GetFatherList(); // 获取父节点列表
    },
    // 添加目录
    addNode() {
      if (!this.form.catalogName || !this.form.parentId) {
        if (!this.form.catalogName) {
          this.$message.error("请输入目录名称");
        } else {
          this.$message.error("请选择上级目录");
        }
      } else {
        InstitutionalFileApi.addCatalog(this.form).then(res => {
          this.$message({
            message: res.data.message,
            type: res.data.success ? "success" : "waring"
          });
          console.log(" 添加节点结果--------------", res.data);
          if (res.data.code == 200) {
            this.GetTreeData(); // 刷新
          }
        });
      }
    },
    // 删除目录
    delNode() {
      if (this.selectNode.id && this.selectNode.name) {
        this.dialogVisible2 = false; // 关闭弹出层
        InstitutionalFileApi.deleteCatalogById({
          catalogId: this.selectNode.id
        }).then(res => {
          this.$message({
            message: res.data.message,
            type: res.data.success ? "success" : "waring"
          });
          console.log(" 添加节点结果--------------", res.data);
          if (res.data.code == 200) {
            this.GetTreeData(); // 刷新
          }
          // 清空选中的目录
          this.selectNode = {
            id: "",
            name: ""
          };
        });
      }
    },
    // 点击提交-添加节点
    Submit() {
      this.dialogVisible = false;
      this.addNode(this.form); // 添加节点
    },
    // tree点击右键菜单
    rightClick(MouseEvent, data, Node, element) {
      console.log("MouseEvent", MouseEvent);
      this.menuVisible = false;
      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector("#menu");
      menu.style.left = MouseEvent.clientX + "px";
      menu.style.top = MouseEvent.clientY - 82 + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      // console.log('右键被点击的event:', MouseEvent)
      console.log("右键被点击的data:", data);
      this.selectNode = {
        id: data.id,
        name: data.name
      };
      // console.log("右键被点击的data:", data.id);
      // console.log('右键被点击的value:', Node)
      // console.log('右键被点击的element:', element)
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
};
</script>
<style lang="less" scoped>
.menu__item {
  padding: 0.08rem 0.3rem;
}
.menu {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0.1rem 0;
  max-width: 2rem;
  border: 1px solid #eeeeee;
  background-color: #fff;
  border-radius: 0.05rem;
}

li:hover {
  background-color: #2d3a4b;
  color: white;
  cursor: pointer;
}
@import url("./InstitutionalFile.less");
</style>